<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%"  @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column label="商品图片">
        <template slot-scope="scope">
          <img :src="scope.row.GoodImg" width="30px" height="30px" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="GoodName" label="商品名称"> </el-table-column>
      <el-table-column prop="GoodPrice" label="单价"> </el-table-column>
      <el-table-column prop="CarCount" label="数量">
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.CarCount"
            @change="handleChange(scope.row.CarId,scope.row.CarCount)"
            :min="1"
            label="描述文字"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="小计">
        <template slot-scope="scope">
            {{scope.row.GoodPrice * scope.row.CarCount}}
        </template>
         </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="del(scope.row.CarId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div>
      已选择:{{multipleSelection.length}}商品
      总金额:{{totalcount}}
      <button @click="tojiesuan">去结算</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      totalcount:0
    };
  },
  methods: {
    getshopcar() {
      let userid = sessionStorage.getItem("userid");
      this.$axios({
        url: "http://localhost:13443/api/Goods/GetShopCar",
        method: "get",
        params: {
          UserId: userid,
        },
      }).then((res) => {
        this.tableData = res.data;
      });
    },
    del(CarId) {
      if (confirm("确定要删除吗")) {
        this.$axios({
          url: "http://localhost:13443/api/Goods/DelShopcar",
          method: "post",
          params: {
            CarId: CarId,
          },
        }).then((res) => {
          if (res.data > 0) {
            alert("删除成功");
            this.getshopcar();
            return;
          } else {
            alert("删除失败");
          }
        });
      }
    },
    handleChange(CarId,value) {
      this.$axios({
        url:'http://localhost:13443/api/Goods/editcount',
        method:'post',
        params:{
          CarId:CarId,
          CarCount:value
        }
      }).then(res=>{
        if(res.data>0)
        {
          this.getshopcar();
        }
      })
    },
    handleSelectionChange(val) {
        this.multipleSelection = val;
        this.totalcount=0;
        this.multipleSelection.filter((item)=>{
          this.totalcount+=item.GoodPrice * item.CarCount
        })
      },tojiesuan(){
    this.$router.push('/ddqr')
  }
  },
  created() {
    this.getshopcar();
  },
  
};
</script>